<style rel="stylesheet/scss" lang="scss" scoped>
  .sel-tree {
    background-color: #ffffff;
    .title {
      font-size: 18px;
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      position: relative;
      .sure {
        position: absolute;
        top: 0;
        right: .5rem;
        margin-right: .5rem;
        font-size: .8rem;
        color: rgb(9, 148, 219);
        line-height: 2rem;
      }
    }
  }
</style>
<template>
  <div class="sel-tree">
    <div class="title">{{title}}<span class="sure" @click="sure">完成</span></div>
    <tab :list="titles" @clickItem="onTabClick" ref="tab"></tab>
    <list :list="listData" :idName="idName" :txtName="name" :activeId="curId" @clickItem="clickItem"
          :height="(height-4)+'rem'"
          style="color:#666"></list>
  </div>
</template>
<script>
  import List from './scrollList.vue';
  import Tab from './tab.vue';
  export default {
    components: {Tab, List},
    props: {
      title: null,
      data: null,
      idName: {
        default: 'id'
      },
      pidName: {
        default: 'pid'
      },
      seqName: {
        default: 'seq'
      },
      name: {
        type: String,
        default: 'name'
      },
      height: {
        type: Number,
        default: 16
      }
    },
    data(){
      return {
        curId: null,
        curChoosePid: null,
        mapData: {},
        treeData: [],
      };
    },
    mounted(){
      if (this.data && this.data.length > 0) {
        this.setData(this.data);
      }
    },
    methods: {
      setData(data, curId){//设置数据
        this.toTree(data);
        var cur = null;
        //设置默认节点
        if (curId) {
          cur = this.mapData[curId];
        }
        if (!cur) {
          var tree = this.treeData;
          if (tree.length == 1 && tree[0].children) {
            cur = tree[0];
          }
        }
        this.curId = cur ? cur[this.idName] : null;
        this.curChoosePid = '-1';
      },
      toTree(data){//转成树形结构
        var tree = [];
        if (data) {
          var idName = this.idName;
          var pidName = this.pidName;
          var idMap = {};
          data.forEach(function (d) {
            idMap[d[idName]] = d;
          });

          data.forEach(function (d) {
            var pid = d[pidName];
            if (pid && idMap[pid]) {
              var children = idMap[pid].children;
              if (children) {
                children.push(d);
              } else {
                idMap[pid].children = [d];
              }
            } else {
              tree.push(d);
            }
          });
        }
        this.mapData = idMap;
        this.treeData = tree;
      },
      fillTitles(titles, pid){
        var parent = this.mapData[pid];
        if (parent) {
          var title = {
            id: parent[this.idName],
            name: parent[this.name]
          };
          if (pid == this.curChoosePid) {
            title.selected = true;
          }
          titles.push(title);
          var superPid = parent[this.pidName] || null;
          if (superPid) {
            this.fillTitles(titles, superPid);
          }
        }
      },
      onTabClick(item){
        var id = item[this.idName];
        if (id == '-1') {
          return;
        }
        this.curId = id;
        this.curChoosePid = id;
      },
      clickItem(item){
        this.curId = item[this.idName];
        var curItem = this.mapData[this.curId];
        if (curItem.children && curItem.children.length > 0) {
          this.curChoosePid = null;
          this.$refs.tab.scrollSelected();
        }
      },
      sure(){
        if (this.curId) {
          this.$emit('chooseItem', this.mapData[this.curId]);
        } else {
          this.$vux.toast.text('请选择一条数据');
        }
      }
    },
    computed: {
      listData(){
        var parent = null;
        if (this.curChoosePid == null || this.curChoosePid == -1) {
          parent = this.curId ? this.mapData[this.curId] : null;
          if (parent && (!parent.children || parent.children.length == 0)) {
            var pid = parent ? parent[this.pidName] : null;
            if (pid) {
              parent = this.mapData[pid];
            }
          }
        } else {
          var cur = this.curId ? this.mapData[this.curId] : null;
          var pid = cur ? cur[this.pidName] : null;
          if (pid) {
            parent = this.mapData[pid];
          }
        }
        return parent ? parent.children || [] : this.treeData;
      },
      titles(){
        var titles = [];
        var pid = null;
        if (this.curChoosePid == null || this.curChoosePid == '-1') {
          var cur = this.curId ? this.mapData[this.curId] : null;
          if (cur && (!cur.children || cur.children.length == 0)) {
            pid = cur[this.pidName] || null;
          } else {
            pid = this.curId;
          }
          titles.push({id: '-1', name: '请选择', selected: true});
        } else {
          pid = this.curChoosePid;
        }
        this.fillTitles(titles, pid);
        titles.reverse();
        return titles;
      }
    }
  }
</script>
